<template>
  <div class="g-container" style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import axios from "@/utils/requestdp";
import dayjs from 'dayjs'
import qs from 'qs'
import uuidv1 from "uuid/v1";
export default {
  name: "nenghaofenxiTaian",
  components: {},
  data() {
    return {
      options: {},
    };
  },
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.pidsHeat = [];
      this.nameListHeat = [];
      axios.get('/bigScreen/bigScreen').then(res => {
        console.log(res)
        let data = res.data.filter(v => v.attrName === 'heatplant_pids')[0].attrValue.split(',');
        data.forEach(v => {
          if (v.split('@@')[0] === 'heatplant') {
            this.pidsHeat.push(v.split('@@')[1]);
            this.nameListHeat.push({
              pid: Number(v.split('@@')[1]),
              name: v.split('@@')[2]
            })
          }
        })
        let params = {
          pageNum: 1,
          pageSize: 30,
          pids: this.pidsHeat.join(',')
        }
        console.log(params)
        // 查询热源监控
        axios.get('/model/heatplantRealtimeMonitor?'+qs.stringify(params)).then(rs => {
          let data = rs.rows;
          let total = 0;
          if (data.length > 0) {
            data.forEach(v => {
              total += v.m003qc;
            })
          }
          let seriesData = [];
          this.nameListHeat.forEach(n => {
            data.forEach(d => {
              if (n.pid == d.pid) {
                seriesData.value = d.m003qc;
                seriesData.name = n.name;
              }
            })
          })
          var myChart = echarts.init(document.getElementById(this.uniqueID));
          //供热面积环状图

          var scale = this.$root.setting.scale;

          var option = {
            tooltip: {
              trigger: "item",
              formatter: "{b} : {c} ({d}%)",
              textStyle: {
                fontWeight: "normal",
                fontSize: 30 * scale
              }
            },
            series: [
              {
                type: "pie",
                radius: ["45%", "60%"],
                hoverAnimation: true,
                color: ["#5957C2", "#76FBC0", "#FCC708", "#29C6FA"],
                data: seriesData.sort(function(a, b) {
                  return a.value - b.value;
                }),
                label: {
                  normal: {
                    textStyle: {
                      fontSize: 30 * scale
                    },
                    formatter: function(params, ticket, callback) {
                      return (
                        "{white|" +
                        10 +
                        "}\n{blue|" +
                        20 +
                        "}{white|MW}"
                      );
                    },
                    rich: {
                      white: {
                        color: "#fff",
                        fontSize: 30 * scale,
                        padding: [10, 0]
                      },
                      blue: {
                        color: "#53F3F3",
                        fontSize: 32 * scale
                      }
                    }
                  }
                },
                labelLine: {
                  normal: {
                    length: 30 * scale,
                    length2: 50 * scale,
                    lineStyle: {
                      width: 5
                    }
                  }
                }
              }
            ]
          };

          myChart.setOption(option);
        })
      })
    },
  },
};
</script>
<style lang='scss' scoped>
</style>